<template>
  <ErpLayout>
    <div class="modern-page">
      <!-- 核心业务入口 -->
      <t-card class="business-modules modern-card" :bordered="false">
        <template #header>
          <h2 class="modern-text-gradient">核心业务入口</h2>
        </template>
        <t-row :gutter="[24, 24]">
          <t-col 
            v-for="module in businessModules" 
            :key="module.id" 
            :span="4"
          >
            <t-card class="module-card modern-card-interactive" hover @click="navigateTo(module.path)">
              <div class="module-content">
                <div class="module-icon modern-float">
                  <component :is="module.icon" size="32" />
                </div>
                <div class="module-title">{{ module.title }}</div>
                <div class="module-desc">{{ module.description }}</div>
              </div>
            </t-card>
          </t-col>
        </t-row>
      </t-card>

      <!-- 数据看板 -->
      <t-card class="data-dashboard modern-card" :bordered="false">
        <template #header>
          <h2 class="modern-text-gradient">数据看板</h2>
        </template>
        <t-row :gutter="[24, 24]">
          <t-col 
            v-for="stat in statisticsData" 
            :key="stat.id" 
            :span="6"
          >
            <t-card class="stat-card modern-glass">
              <div class="stat-content">
                <div class="stat-number modern-text-gradient">{{ stat.value }}</div>
                <div class="stat-label">{{ stat.label }}</div>
                <div :class="['stat-trend', stat.trendType]">
                  <component :is="stat.trendIcon" size="14" /> 
                  {{ stat.trend }}
                </div>
              </div>
            </t-card>
          </t-col>
        </t-row>
      </t-card>

      <!-- 多平台接入区域 -->
      <t-card class="platform-integration modern-card" :bordered="false">
        <template #header>
          <h2 class="modern-text-gradient">多平台接入</h2>
        </template>
        <t-row :gutter="[24, 24]">
          <t-col 
            v-for="platform in platformsData" 
            :key="platform.id" 
            :span="6"
          >
            <t-card :class="['platform-card', 'modern-glass', { active: platform.isActive }]">
              <div class="platform-content">
                <div class="platform-icon">
                  <component :is="platform.icon" size="28" />
                </div>
                <div class="platform-name">{{ platform.name }}</div>
                <t-tag :theme="platform.statusTheme" size="small">
                  {{ platform.status }}
                </t-tag>
              </div>
            </t-card>
          </t-col>
        </t-row>
      </t-card>

    </div>
  </ErpLayout>
</template>

<script setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import ErpLayout from '@/layouts/ErpLayout.vue'

const router = useRouter()

// 业务模块数据
const businessModules = ref([
  {
    id: 'customers',
    title: '客户管理',
    description: '管理客户信息、联系记录',
    icon: 'UserIcon',
    path: '/customers'
  },
  {
    id: 'products',
    title: '产品库',
    description: '商品信息、规格管理',
    icon: 'ApplicationIcon',
    path: '/products'
  },
  {
    id: 'suppliers',
    title: '供应商',
    description: '供应商资料、合作管理',
    icon: 'ShopIcon',
    path: '/suppliers'
  },
  {
    id: 'orders',
    title: '订单中心',
    description: '订单处理、状态跟踪',
    icon: 'CatalogIcon',
    path: '/orders'
  },
  {
    id: 'inventory',
    title: '库存管理',
    description: '库存监控、出入库管理',
    icon: 'City11Icon',
    path: '/inventory'
  },
  {
    id: 'finance',
    title: '财务中心',
    description: '财务报表、收支管理',
    icon: 'WalletIcon',
    path: '/finance'
  }
])

// 统计数据
const statisticsData = ref([
  {
    id: 'orders',
    value: '1,234',
    label: '总订单数',
    trend: '+12.5%',
    trendType: 'up',
    trendIcon: 'ChevronUpIcon'
  },
  {
    id: 'sales',
    value: '¥89,567',
    label: '月销售额',
    trend: '+8.3%',
    trendType: 'up',
    trendIcon: 'ChevronUpIcon'
  },
  {
    id: 'customers',
    value: '456',
    label: '活跃客户',
    trend: '-2.1%',
    trendType: 'down',
    trendIcon: 'ChevronDownIcon'
  },
  {
    id: 'inventory',
    value: '2,890',
    label: '库存商品',
    trend: '持平',
    trendType: 'stable',
    trendIcon: 'RemoveIcon'
  }
])

// 平台数据
const platformsData = ref([
  {
    id: 'web',
    name: 'Web管理端',
    status: '已接入',
    statusTheme: 'success',
    icon: 'DesktopIcon',
    isActive: true
  },
  {
    id: 'miniprogram',
    name: '小程序端',
    status: '待接入',
    statusTheme: 'warning',
    icon: 'LogoMiniprogramIcon',
    isActive: false
  },
  {
    id: 'mobile',
    name: '移动APP',
    status: '规划中',
    statusTheme: 'default',
    icon: 'MobileIcon',
    isActive: false
  },
  {
    id: 'ecommerce',
    name: '电商平台',
    status: '规划中',
    statusTheme: 'default',
    icon: 'ShopIcon',
    isActive: false
  }
])



// 导航函数
const navigateTo = (path) => {
  console.log(`导航到: ${path}`)
  // 这里可以添加实际的路由跳转逻辑
  // router.push(path)
}


</script>

<style>
/* 保持原有的TDesign组件样式，并通过现代化增强类来提升视觉效果 */

/* 确保卡片间距 */
.modern-page {
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 32px;
}

/* 卡片容器间距 */
.business-modules,
.data-dashboard,
.platform-integration {
  margin-bottom: 32px;
}

.business-modules:last-child,
.data-dashboard:last-child,
.platform-integration:last-child {
  margin-bottom: 0;
}

/* TDesign 网格系统增强 */
.t-row {
  margin-left: -12px;
  margin-right: -12px;
}

.t-col {
  padding-left: 12px;
  padding-right: 12px;
  margin-bottom: 24px;
}

/* 最后一行不需要底部间距 */
.t-row:last-child .t-col {
  margin-bottom: 0;
}

/* 业务模块卡片增强 */
.module-card {
  height: 100%;
  cursor: pointer;
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.module-card:hover :deep(.t-card) {
  transform: translateY(-8px) scale(1.02);
}

.module-content {
  text-align: center;
  padding: 24px 20px;
}

.module-icon {
  font-size: 40px;
  margin-bottom: 16px;
  padding: 16px;
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.1) 0%, rgba(168, 85, 247, 0.1) 100%);
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
}

.module-card:hover .module-icon {
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.2) 0%, rgba(168, 85, 247, 0.2) 100%);
  transform: scale(1.1);
}

.module-title {
  font-size: 16px;
  font-weight: 600;
  color: #1e293b;
  margin-bottom: 8px;
  letter-spacing: -0.025em;
}

.module-desc {
  font-size: 13px;
  color: #64748b;
  line-height: 1.5;
  font-weight: 400;
}

/* 统计卡片增强 */
.stat-card {
  height: 100%;
  transition: all 0.3s ease;
  position: relative;
}

.stat-card :deep(.t-card)::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, #10b981, #06b6d4, #3b82f6);
  border-radius: 16px 16px 0 0;
}

.stat-card:hover :deep(.t-card) {
  transform: translateY(-4px);
}

.stat-content {
  padding: 24px;
  text-align: left;
}

.stat-number {
  font-size: 32px;
  font-weight: 700;
  margin-bottom: 8px;
  letter-spacing: -0.025em;
}

.stat-label {
  font-size: 14px;
  color: #64748b;
  margin-bottom: 12px;
  font-weight: 500;
}

.stat-trend {
  font-size: 13px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px;
  border-radius: 8px;
  width: fit-content;
}

.stat-trend.up {
  color: #059669;
  background: rgba(16, 185, 129, 0.1);
}

.stat-trend.down {
  color: #dc2626;
  background: rgba(239, 68, 68, 0.1);
}

.stat-trend.stable {
  color: #6b7280;
  background: rgba(107, 114, 128, 0.1);
}

/* 平台卡片增强 */
.platform-card {
  text-align: center;
  transition: all 0.3s ease;
  height: 100%;
}

.platform-card.active :deep(.t-card) {
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.1) 0%, rgba(168, 85, 247, 0.1) 100%);
  border: 2px solid rgba(99, 102, 241, 0.3);
}

.platform-card:hover :deep(.t-card) {
  transform: translateY(-4px);
}

.platform-content {
  padding: 24px 20px;
}

.platform-icon {
  font-size: 32px;
  margin-bottom: 16px;
  padding: 12px;
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.1) 0%, rgba(168, 85, 247, 0.1) 100%);
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
}

.platform-card.active .platform-icon {
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.2) 0%, rgba(168, 85, 247, 0.2) 100%);
}

.platform-name {
  font-size: 15px;
  font-weight: 600;
  color: #1e293b;
  margin-bottom: 12px;
  letter-spacing: -0.025em;
}

.platform-content :deep(.t-tag) {
  border-radius: 12px;
  font-weight: 500;
  font-size: 12px;
  padding: 4px 12px;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .module-content,
  .stat-content,
  .platform-content {
    padding: 20px 16px;
  }
  
  .stat-number {
    font-size: 28px;
  }
}

@media (max-width: 480px) {
  .module-icon {
    font-size: 32px;
    padding: 12px;
  }
  
  .stat-number {
    font-size: 24px;
  }
}
</style>
